﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Role.aspx.cs" Inherits="WebApplication.Admin.Role" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>角色管理</title>
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    <style type="text/css">
        .exists
        {
            background-color: red;
        }
    </style>
</head>
<body>
    <div style="width: 100%;">
        <div class="mini-toolbar" style="border-bottom: 0; padding: 0px;">
            <table style="width: 100%;">
                <tr>
                    <td style="width: 100%;">
                        <a class="mini-button" iconcls="icon-add" onclick="addRow()" plain="true" tooltip="增加...">
                            增加</a> <a class="mini-button" iconcls="icon-remove" onclick="removeRow()" plain="true"
                                tooltip="删除后别忘记保存">删除</a> <span class="separator"></span><a class="mini-button" iconcls="icon-save"
                                    onclick="saveData()" plain="true">保存</a>
                    </td>
                    <td style="white-space: nowrap;">
                        <input id="key" class="mini-textbox" emptytext="请输入名称" style="width: 150px;" onenter="onKeyEnter" />
                        <a class="mini-button" onclick="search()">查询</a>
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="mini-fit">
        <div id="datagrid1" class="mini-datagrid" style="width: 100%; height: 100%;" allowresize="true"
            allowcelledit="true" allowcellselect="true" multiselect="true" showpager="false"
            allowcellvalid="true" editnextonenterkey="true" editnextrowcell="true" url="/Handler.ashx?method=LoadRole"
            idfield="ID" emptytext="数据为空，<a href='javascript:newRow()'>增加一条</a>" showemptytext="true">
            <div property="columns">
                <div type="indexcolumn" headeralign="center" allowsort="true">
                    序号</div>
                <div type="checkcolumn">
                </div>
                <div field="Name" width="100" allowsort="true" vtype="required;maxLength:50">
                    名称
                    <input property="editor" class="mini-textbox" style="width: 100%;" />
                </div>
                <div field="Description" width="200" allowsort="true" vtype="maxLength:500">
                    说明
                    <input property="editor" class="mini-textbox" style="width: 100%;" />
                </div>
                <div name="edit" field="ID" width="80" align="center" headeralign="center">
                    操作
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        mini.parse();

        var grid = mini.get("datagrid1");
        grid.on("drawcell", function (e) {
            var column = e.column;
            if (column.name == "edit") {
                e.cellStyle = "text-align:center";
                e.cellHtml = '<a href="javascript:removeRow(' + grid.getRow(e.rowIndex)._uid + ')">删除</a>';
            }
        });
        grid.load();
        grid.sort("","");
        function search() {
            var key = mini.get("key").getValue();

            grid.load({ key: key });
        }

        function onKeyEnter(e) {
            search();
        }

        function addRow() {
            var newRow = {};
            grid.addRow(newRow, 0);
            grid.validateRow(newRow);
            grid.beginEditCell(newRow, "Name");
        }

        function removeRow(uid) {
            if (uid != undefined) {
                grid.removeRow(grid.getRowByUID(uid));
            } else {
                var rows = grid.getSelecteds();
                if (rows.length > 0) {
                    grid.removeRows(rows, true);
                }
            }
        }

        function saveData() {
            grid.validate();
            if (!grid.isValid()) {
                var error = grid.getCellErrors()[0];
                grid.beginEditCell(error.record, error.column);
                mini.alert("数据不合法，请检查红色单元格！"); return;
            }
            var data = grid.getChanges();
            var json = mini.encode(data);

            grid.loading("保存中，请稍后......");
            $.ajax({
                url: "/Handler.ashx?method=SaveRole",
                data: { data: json },
                type: "post",
                success: function (text) {
                    grid.unmask();
                    var result = mini.decode(text);
                    if (result.Success) {
                        grid.reload();
                    } else {
                        if (result.Exists) {
                            grid.deselectAll();
                            var existsText = "";
                            for (var j = 0; j < result.Exists.length; j++) {
                                var row = grid.getRowByUID(result.Exists[j]);
                                if (existsText.indexOf(row.DataText) < 0) {
                                    existsText += row.Name + ",";
                                }
                                grid.addRowCls(row, "exists");
                            }
                            mini.alert("存在以下重复的名称，请您修改后再保存！<br>" + existsText.substr(0, existsText.length - 1));
                        } else {
                            grid.unmask(); mini.alert("保存失败：" + result.Message);
                        }
                    }
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    mini.alert(jqXHR.responseText);
                    grid.unmask();
                }
            });
        }

        grid.on("celleditenter", function (e) {
            var index = grid.indexOf(e.record);
            if (index == grid.getData().length - 1) {
                var row = {};
                grid.addRow(row);
            }
        });
    </script>
</body>
</html>
